.box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 50px;
  }

  .heart {
    height: 70px;
    width: 70px;
    background: #f20044;
    position: relative;
    transform: rotate(-45deg);
    box-shadow: -10px 10px 90px #f20044;
    animation: heart 0.6s linear infinite;
  }

  @keyframes heart {
    0% {
      transform: rotate(-45deg) scale(1.07);
    }

    80% {
      transform: rotate(-45deg) scale(1);
    }

    100% {
      transform: rotate(-45deg) scale(0.8);
    }
  }

  .heart::before {
    content: "";
    position: absolute;
    height: 70px;
    width: 70px;
    background: #f20044;
    top: -50%;
    border-radius: 50px;
    box-shadow: -10px -10px 90px #f20044;
  }

  .heart::after {
    content: "";
    position: absolute;
    height: 70px;
    width: 70px;
    background: #f20044;
    right: -50%;
    border-radius: 50px;
    box-shadow: 10px 10px 90px #f20044;
  }

  .polling_message {
    color: white;
    float: left;
  }

  .view_port {
    height: 25px;
    overflow: hidden;
    text-align: center;
  }

  .cylon_eye {
    background-color: #f20044;
    background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.9) 25%,
      rgba(0, 0, 0, 0.1) 50%,
      rgba(0, 0, 0, 0.9) 75%
    );
    color: white;
    height: 100%;
    width: 20%;

    -webkit-animation: 4s linear 0s infinite alternate move_eye;
    animation: 4s linear 0s infinite alternate move_eye;
  }

  @-webkit-keyframes move_eye {
    from {
      margin-left: -20%;
    }
    to {
      margin-left: 100%;
    }
  }
  @keyframes move_eye {
    from {
      margin-left: -20%;
    }
    to {
      margin-left: 100%;
    }
  }